<template>
  <div style="margin-top: 500px">
    <el-table :data="data" height="300" ref="tableRef">
      <el-table-column prop="name"></el-table-column>
      <el-table-column prop="age"></el-table-column>
      <el-table-column prop="sex"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const tableRef = ref(null)
let count = ref(0)
let totalRows = ref(0)
const data = ref([
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
  {name: '张三', age: 18, sex: '男'},
])

const initRolling = (table, tr, pageCount) => {
  setInterval(() => {
    if (count.value >= totalRows.value) {
      count.value = 0
    } else {
      count.value += pageCount
    }

    table.scrollTo({
      top: tr[count.value > totalRows.value ? totalRows.value : count.value].offsetTop,
      left: 0,
      behavior: 'smooth'
    })

    // count
  }, 1000)
}
const init = () => {
  const table = tableRef.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__wrap')
  const tr = tableRef.value.$el.querySelectorAll('.el-table__body-wrapper table tbody tr')
  console.log('tr[1].offsetTop',tr[1].offsetTop)
  // 未在显示区域的数量是多少
  totalRows.value = Math.ceil((parseInt(table.scrollHeight) - 300) / tr[1].offsetTop) || 0
  // 直接算滚动一页
  let pageCount = Math.ceil(table.offsetHeight / tr[1].offsetTop)
  if (totalRows.value > 0) {
    initRolling(table, tr, pageCount)
  }
}
onMounted(() => {
  setTimeout(() => {
    init()
  }, 100)
})
</script>

<style lang="scss" scoped>

</style>